<template>
    <div class="article-add pb60">
        <Form :model="detailInfo" ref="cateValidate" label-position="right" :rules="cateValidate" :label-width="80" action="javascript:void(0)">
            <FormItem label="父栏目" prop="parent_id">
                <TreeSelect clearable v-model="detailInfo.parent_id" :data="cateSelect" v-width="200"></TreeSelect>
            </FormItem>
            <FormItem label="栏目名称" prop="name">
                <Input v-model="detailInfo.name"></Input>
            </FormItem>
            <FormItem label="标题" prop="title">
                <Input v-model="detailInfo.title"></Input>
            </FormItem>
            <FormItem label="关键字" prop="keyword">
                <Input v-model="detailInfo.keyword"></Input>
            </FormItem>
            <FormItem label="描述" prop="description">
                <Input type="textarea" v-model="detailInfo.description" :autosize="{minRows:4,maxRows:8}"></Input>
            </FormItem>
            <!-- 上传 -->
            <FormItem label="缩略图">
                <upload-thumb v-model="detailInfo.thumb" ref="uploadthumb" :defaultList="thumbList"></upload-thumb>
            </FormItem>
            <FormItem label="栏目内容">
                <tinymce-editor ref="addContent" :tinymceValue="detailInfo.content"></tinymce-editor>
            </FormItem>
            <FormItem label="单页面">
                <i-switch :true-value="1" :false-value="0" v-model="detailInfo.type" size="large">
                    <template #open>是</template>
                    <template #close>否</template>
                </i-switch>
            </FormItem>
            <FormItem label="栏目模板">
                <Input v-model="detailInfo.cate_tpl"></Input>
            </FormItem>
            <FormItem label="文章模板">
                <Input v-model="detailInfo.art_tpl"></Input>
            </FormItem>
            <FormItem label="是否显示">
                <i-switch :true-value="1" :false-value="0" v-model="detailInfo.display" size="large">
                    <template #open>是</template>
                    <template #close>否</template>
                </i-switch>
            </FormItem>
            <FormItem label="是否外链">
                <i-switch :true-value="1" :false-value="0" v-model="detailInfo.link_flag" size="large">
                    <template #open>是</template>
                    <template #close>否</template>
                </i-switch>
            </FormItem>
            <FormItem label="外链" v-if="detailInfo.link_flag == 1">
                <Input v-model="detailInfo.url" placeholder="输入外部链接地址..."></Input>
            </FormItem>
            <FormItem label="排序" prop="sort">
                <InputNumber :max="9999" :min="0" v-model="detailInfo.sort"></InputNumber>
            </FormItem>
            <FormItem>
                <Button style="margin-right: 8px" @click="goBack()">返回</Button>
                <Button type="primary" @click="handleSubmit('cateValidate')">提交</Button>
            </FormItem>
    </Form>
    </div>
    </template>
    
    <script>
    import UploadThumb from '../.././components/thumb'
    import TinymceEditor from '../.././components/tinymce'
    export default {
        name: 'CateAdd',
        data() {
            return {
                cateSelect: [],
                cateValidate: {
                    parent_id: [
                        { required: true, type:'integer', message: '栏目必须填写', trigger: 'change' }
                    ],
                    name: [
                        { required: true, message: '名称必须填写', trigger: 'blur' }
                    ],
                    title: [
                        { required: true, message: '标题必须填写', trigger: 'blur' }
                    ],
                    description: [
                        { required: false, message: '描述不能超过255个字符', max: 255, trigger: 'blur' }
                    ],
                    cate_tpl: [
                        { required: true, message: '栏目模板必须填写', trigger: 'blur' }
                    ],
                    art_tpl: [
                        { required: true, message: '文章模板必须填写', trigger: 'blur' }
                    ],
                    sort: [
                        { required: true, type: 'integer', message: '排序必须填写', trigger: 'blur' }
                    ],
                },
                disabled: false,
                thumbList:[],
                detailInfo: {
                    'parent_id': 0,
                    'name': '',
                    'title': '',
                    'keyword': '',
                    'description': '',
                    'thumb': '',
                    'content': '',
                    'link_flag': 0,
                    'url': '',
                    'cate_tpl': 'list',
                    'art_tpl': 'show',
                    'display': 1,
                    'type': 0,
                    'sort': 0,
                },
            }
        },
        // 组件
        components: {
            UploadThumb,
            TinymceEditor
        },
        created() {
            this.getData();
        },
        methods: {
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (!valid) {
                        this.$Message.error('请检查输入的信息是否正确！');
                        this.$emit('showCreate',2);
                    } else {
                        // 图片
                        if (this.$refs['uploadthumb'].uploadList.length) {
                            this.detailInfo.thumb = this.$refs['uploadthumb'].uploadList[0].url;
                        }else{
                            this.detailInfo.thumb = '';
                        }
                        this.detailInfo.content = this.$refs['addContent'].tinymce_value
                        this.$api.category.create(this.detailInfo).then(res => {
                            if (res.code == 200) {
                                this.$Message.success(res.message);
                                this.$router.back();
                            }
                        });
                        return;
                    }
                })
            },
            goBack(){
                this.$router.back();
            },
            getData() {
                this.thumbList = [];
                this.$api.category.select().then(res => {
                    if (res.code == 200) {
                        this.cateSelect = res.result;
                    }
                });
            },
        }
    }
    </script>
    